import Header from './../../components/Header';
import Panel from './../../elements/Panel';
import {Config, Fetch, Lang} from './../../libs';
import {md5Url, URL} from './../../libs/Url';
import Photo from './../../components/Photo';
import PhotoCreateOrUpdate from './../../components/form/ablum_update_or_create';
import Modal from "../../components/Modal/";
import './Photo.less';
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";
import UploadPhoto from '../../components/form/uploadPhoto';
import {
    fetch, add_item_to_list, update_item_for_list_by_index,
    fetch_remove, setArgumentItem, enable_delete_btn, selectAllItem, selectItem
} from "../../actions";
import {connect} from "react-redux";
import {Link} from "react-router";
const Photos = React.createClass({
    getInitialState(){
        return {
            open: false,
            list: []
        }
    },
    componentDidMount(){
        // ALBUM_FIND
        const {dispatch} = this.props;
        // dispatch(fetch({url: URL.ALBUM_FIND}));
        Fetch(URL.ALBUM_FIND)
            .then(res=> {
                this.setState({
                    list: res.list
                })
            })
            .catch(e=> {
                console.log(e)
            })
    },
    deleteItem(id, index){
        if (id) {
            Fetch(URL.ALBUMS_DELETE, {
                body: {
                    ids: id
                }
            })
                .then(res=> {
                    this.setState({
                        list: [
                            ...this.state.list.slice(0, index),
                            ...this.state.list.slice(index + 1),
                        ]
                    })
                })
                .catch(e=> {
                    console.log(e)
                })
        }
    },
    render(){
        const self = this, {dispatch} = this.props, state = this.state;
        const album_list = state.list;
        return (
            <Panel>
                <Header>{Lang.menus.CLASS_INFO_PHOTO}</Header>
                <div className="row photo">
                    <div className="col-sm-12">
                        <div className="head">
                            <button className="btn btn-primary btn-sm"
                                    onClick={()=> {
                                        if (!album_list.length) {
                                            return alert('请先创建相册!')
                                        }
                                        self.setState({
                                            modal_title: '上传照片',
                                            open: true
                                        })
                                    }}
                            >
                                <i className="fa fa-upload"></i> 上传照片
                            </button>
                            <button data-toggle="modal" href="javascript:void(0);"
                                    className="btn btn-default btn-sm"
                                    onClick={()=> {
                                        this.setState({
                                            modal_title: '创建相册',
                                            open: true
                                        })
                                    }}
                                    type="button">
                                创建相册
                            </button>
                            <Modal
                                className="modal-lg"
                                open={self.state.open}>
                                <Modal.Header onclose={()=> {
                                    self.setState({open: false, selected: ''})
                                }
                                }>{self.state.modal_title}</Modal.Header>
                                <Modal.Body>
                                    {
                                        self.state.modal_title != '上传照片' ?
                                            <PhotoCreateOrUpdate
                                                {...self.state.current || {}}
                                                onclose={()=> {
                                                    self.setState({open: false, selected: ''})
                                                }}
                                                onsuccess={(data)=> {
                                                    var state_ = {
                                                        open: false,
                                                        selected: ''
                                                    };
                                                    var index = self.state.current.index;
                                                    data = Object.assign(self.state.current, data || {})
                                                    if (self.state.modal_title == '编辑相册') {
                                                        data.count = 0;
                                                        state_.list = [...this.state.list, data];
                                                    } else {
                                                        state_.list = [
                                                            ...this.state.list.slice(0, index),
                                                            data,
                                                            ...this.state.list.slice(index + 1),
                                                        ];
                                                    }
                                                    self.setState(state_)
                                                }}
                                            ></PhotoCreateOrUpdate> :
                                            <UploadPhoto list={album_list}></UploadPhoto>
                                    }
                                </Modal.Body>
                            </Modal>

                        </div>
                        <div className="album-list">
                            {
                                state.list.map((item, index)=> {
                                    return <div key={index} className="album">
                                        <Link to={Config.MENUS.CLASS_PHOTOS_DETAIL.replace(':id', item.id)}
                                              className="imgbox" href="javascript:void(0);">
                                            <img
                                                src={item.cover ? URL.FUN_UPLOAD_PREVIEW(item.cover) : require('../../imgs/no-pic.png')}/>
                                            <span>{item.count}</span>
                                        </Link>
                                        <div className="dropdown edit">
                                            <div className="dropdown-toggle" data-toggle="dropdown">
                                                <i className="edit-icon fa fa-angle-down"></i>
                                            </div>
                                            <ul className="dropdown-menu">
                                                <li><a href="javascript:void(0)"
                                                       onClick={()=> {
                                                           item.index = index;
                                                           this.setState({
                                                               modal_title: '编辑相册',
                                                               open: true,
                                                               current: item
                                                           })
                                                       }}
                                                >编辑</a></li>
                                                <li role="presentation" className="divider"></li>
                                                <li>
                                                    <a href="#" onClick={()=> {
                                                        if (confirm('确认删除?')) {
                                                            this.deleteItem(item.id, index)
                                                        }

                                                    }}>删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <p><a href="javascript:void(0);">{item.name}</a></p>
                                    </div>
                                })
                            }

                        </div>
                    </div>
                </div>
            </Panel>
        )
    }
})
function select(state) {
    return {
        [md5Url.ALBUM_FIND]: state.fetchBySubject[md5Url.ALBUM_FIND],
        [PAGE_SUBJECT.CLASS_PHOTO]: state.pageBySubject[PAGE_SUBJECT.CLASS_PHOTO],
    }
}
export default connect(select)(Photos)